<template>
  <view class="content">
    <!-- 头部导航 -->
    <view
      class="w-750 title w-bj-white"
      style="position: fixed; top: 0; left: 0; z-index: 999"
    >
      <view class="h-100 w-row-justify-between-align">
        <view class="wh-80 w-row-center" @click="routerBack()">
          <image class="wh-40" src="@/static/gane/goBack-icon.png"></image>
        </view>
        <view class="flex1 h-100 w-row-center w-wz-conts font-36">
          <text>投注记录</text>
        </view>
        <view class="wh-80 w-row-center">
          <uni-datetime-picker
            type="range"
            @change="changeTiem"
            v-model="datetimesingle"
          >
            <image class="wh-50" src="/static/gane/rq.png"></image>
          </uni-datetime-picker>
        </view>
      </view>
    </view>
    <view class="bwh-120"></view>
    <!-- 头部导航结束 -->

    <!-- <view class="content-box padding-20 disflex w-bj-white" v-if="index != 0">
			<view class="">
				游戏类型：
			</view>
			<uni-data-select
					class="dataSelct"
			      v-model="game_type"
			      :localdata="range"
			      @change="gameChange"
			    ></uni-data-select>
		</view> -->

    <!-- 内容区域 -->
    <view class="countBox w-720  w-bor-12 font-24 ">
      <view class="countItem">
        <view class="countMoeny">{{count.jx}}</view>
        <view>进项流水</view>
      </view>
      <view class="countItem">
        <view class="countMoeny">{{count.cx}}</view>
        <view>出项流水</view>
      </view>
      <view class="countItem">
        <view class="countMoeny">{{count.sy}}</view>
        <view>输赢</view>
      </view>
    </view>
    <view
      class="w-720 w-bj-cont w-bor-12 w-column-align m-bottom-20 font-24 w-wz-conts"
      v-for="(item, index) in tableData"
    >
      <view class="h-10"></view>

      <view class="w-680 p-2 w-row-justify-between-align">
        <text class="font-24b text-color-grey">期号{{ item.issue }}</text>
        <view class="w-wz-black8" style="display: flex; align-items: center">
          <text
            style="
              border: solid 2rpx #ffffff;
              padding: 5rpx 10rpx;
              border-radius: 2rpx;
              color: #ffffff;
            "
            v-if="item.status == 2 || item.status == 3"
            >结果 {{ item.issue_number }}</text
          >
          <text class="p-2"></text>

          <text
            v-if="item.status == 1"
            @click="cancel_order(item.orderid, item.money)"
          >
            <image
              class="w-130"
              src="../../../static/gane/order_wzj_kcd.png"
              mode="aspectFill"
              style="height: 45rpx"
            ></image>
          </text>

          <text v-if="item.status == 2">
            <image
              class="w-100"
              src="../../../static/gane/order_yzj.png"
              mode="aspectFill"
              style="height: 45rpx"
            ></image>
          </text>

          <text v-if="item.status == 3">
            <image
              class="w-100"
              src="../../../static/gane/order_wzj.png"
              mode="aspectFill"
              style="height: 45rpx"
            ></image>
          </text>

          <text
            style="
              border: solid 2rpx #ffaa00;
              padding: 5rpx 10rpx;
              border-radius: 2rpx;
              color: #ffaa00;
            "
            v-if="item.status == 4"
            >已撤单</text
          >
        </view>
      </view>
      <view class="w-680 p-2 w-row-justify-between-align">
        <text class="font-26">投注编号</text
        ><text class="w-wz-black8">{{ item.orderid }}</text>
      </view>

      <view class="w-680 p-2 w-row-justify-between-align">
        <text class="font-26">投注类型</text>
        <view class="w-wz-cont" style="display: flex; align-items: center">
          {{ item.game_name }} | {{ item.room_name }} | {{ item.room_betname }}
        </view>
      </view>
<!--      <view class="w-680 p-2 w-row-justify-between-align" v-if="item.track>0">-->
<!--        <text class="font-26">赛道</text-->
<!--        ><text class="w-wz-cont"-->
<!--      ><text class="p-2">{{ item.track }}</text></text-->
<!--      >-->
<!--      </view>-->

      <view class="w-680 p-2 w-row-justify-between-align">
        <text class="font-26">下单号码</text
        ><text class="w-wz-cont"
          ><text class="p-2">{{ item.number }}</text></text
        >
      </view>

      <view class="w-680 p-2 w-row-justify-between-align">
        <text class="font-26">金额倍数</text
        ><text class="w-wz-gree">￥{{ item.money }} | {{ item.odds }}</text>
      </view>
      <!-- <view class="w-680 p-2 w-row-justify-between-align">
				<text class="font-26">投注赔率</text><text class="w-wz-red">{{item.odds}}</text>
			</view> -->
      <view class="w-680 p-2 w-row-justify-between-align">
        <text class="font-26">获得金额</text>
        <text v-if="item.status == 2" class="w-wz-gree"
          >￥{{ item.amoney }}</text
        >
        <text v-else class="w-wz-gree">0.00</text>
      </view>

      <view class="w-680 p-2 w-row-justify-between-align">
        <text class="font-26">投注时间</text
        ><text class="w-wz-black8">{{ item.create_time }}</text>
      </view>
      <view class="h-10"></view>
    </view>

    <!-- <view class="w-720 h-200 w-column-align m-top-50" v-if="tableData.length == 0">
			<image class="wh-150" src="../../../static/gane/zwsj.png"></image>
			<text class="w-wz-conts">暂 无 数 据 </text>
		</view> -->

    <view class="w-300 h-80 w-row-center w-bor-12">
      <text class="w-wz-conts font-28" v-if="isShow">没有数据了...</text>
    </view>

    <view class="wh-30"></view>

    <empty v-if="tableData.length == 0" />
  </view>
</template>

<script>
import $H from '@/pages/common/request.js'
import empty from '@/components/empty.vue'
export default {
  components: {
    empty
  },
  data() {
    return {
      tableData: [],
      count:{
        jx: 2800,
        cx: 2800,
        sy: 2800
      },
      show: false,
      start_time: '',
      end_time: '',
      pagenum: 1,
      type: '',
      total: null,
      isShow: false,
      user_uid: '',
      game_type: '',
      range: [
        {
          text: '台湾28',
          value: 'aozhou'
        },
        {
          text: '加拿大28',
          value: 'jianada'
        },
        {
          text: '韩国K3',
          value: 'hgk3'
        },
        {
          text: '极速韩国K3',
          value: 'jshgk3'
        },
        {
          text: '新澳门六合彩',
          value: 'amlhc'
        },
        {
          text: '香港六合彩',
          value: 'xglhc'
        },
        {
          text: '极速六合彩',
          value: 'jslhc'
        },
        {
          text: '加拿大28',
          value: 'jnd28'
        },
        {
          text: '新澳门28',
          value: 'tw28'
        },
        {
          text: '澳门28',
          value: 'els28'
        },
        {
          text: '香港28',
          value: 'gat28'
        }
      ],

      datetimesingle: []
    }
  },

  onLoad(e) {
    if (e.user_uid) {
      this.user_uid = e.user_uid
      this.type = 'agent'
    }
    this.game_type = e.game_type || ''
    // const UserInfo = uni.getStorageSync('UserInfo');
    // if (UserInfo.uid && UserInfo.token) {
    this.getUserAgentLog()
    // } else {
    // 	return uni.reLaunch({
    // 		url: '/pages/index/index'
    // 	});
    // }
  },

  onReachBottom() {
    uni.showLoading({
      title: '加载数据中...'
    })

    this.pagenum++
    let timer = setInterval(() => {
      uni.hideLoading()
      if (this.tableData.length == this.total) {
        this.isShow = true
      } else {
        this.getUserAgentLog()
      }
      clearTimeout(timer)
    }, 600)
  },

  methods: {
    changeTiem(val) {
      this.pagenum = 1
      this.start_time = val[0]
      this.end_time = val[1]
      this.tableData = []
      this.getUserAgentLog(true)
    },

    gameChange() {
      this.tableData = []
      this.getUserAgentLog()
    },

    getUserAgentLog(isBool) {
      // console.log(this.type)
      $H.post('/app_user_order_list', {
        type: this.type,
        game_type: this.game_type,
        pagenum: this.pagenum,
        start_time: this.start_time,
        end_time: this.end_time,
        user_uid: this.user_uid
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.count = res.data.count
          if (isBool) {
            if (res.data.data.length == 0) {
              this.tableData = []
              this.isShow = true
            } else {
              this.tableData.push(...res.data.data)
            }
          } else {
            this.tableData.push(...res.data.data)
            this.total = res.data.total
            this.show = true
          }
        } else {
          return uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          })
        }
      })
    },

    cancel_order(orderid, money) {
      if (this.type == 'agent') return ''

      let then = this
      uni.showModal({
        title: '撤销投注',
        content: `确定撤销此投注，投注金额${money}?`,
        cancelText: '我在想想',
        confirmText: '确定撤单',
        success: function (res) {
          if (res.confirm) {
            $H.post('/app_user_cancel_order', {
              orderid: orderid
            }).then((res) => {
              console.log(res)
              if (res.code == 200) {
                uni.showToast({
                  title: res.msg,
                  duration: 2000,
                  icon: 'none'
                })
                then.tableData = []
                then.getUserAgentLog(true)
              }
            })
          } else if (res.cancel) {
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
body {
  color: #535d76 !important;
  background-color: #f0f3ff;
  font-size: 3.46667vw;
}
.title {
  .w-wz-conts {
    color: #323233 !important;
  }
}
.countBox{

  display: flex;
  background: #000;
  color: #fff;
  padding:40rpx 0;
  margin-bottom: 20rpx;
  line-height: 48rpx;
  .countItem{
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    .countMoeny{
      font-size: 32rpx;
    }

  }
}
.w-bj-cont {
  background-color: #fff !important;
  box-shadow: 0px 0px 40rpx -10rpx #e7e3e3;
}

.content-box {
  width: 100%;
  margin-bottom: 20rpx;

  .van-cell__title {
    flex: 1;
  }

  .van-cell__value {
    display: block;
  }
}
</style>
<style scoped>
.w-wz-conts {
  color: #323233 !important;
}
.w-wz-black8 {
  color: #323233 !important;
}
</style>